<template>
    <div class="teacher" >
        <div class="box" v-for="(item,index) in teachers" :key="index">
        <div class="top">
          <span> {{item.channel_info.name}} </span>
        </div>
        <ul >
            <li v-for="ite in item.list" :key="ite.teacher_id" v-show="ite.teacher_id" @click="$router.push('/teacherDetail?id='+ite.teacher_id)">
              <img :src="ite.teacher_avatar" alt="">
            <div class="right">
               <p>{{ite.teacher_name}}</p>
               <p>{{ite.introduction}}</p>
            </div>
            </li>
        </ul>
        <dl>
            <dd v-for="ite in item.list" :key="ite.id" v-show="ite.id"  @click="$router.push('/courceDetail?id='+ite.id)">
                <p style="fontSize:0.5rem;margin:0rem">{{ite.title}}</p>
                <p style="fontSize:0.3rem;color: #777;margin:0.15rem 0rem">共点击量{{ite.sales_num}}</p>
              <img :src="ite.cover_img" alt="">          
               <p class="ite-bot"> 
                        <span style="fontSize:0.3rem;color: #777;">{{ite.id}}人报名</span> 
                   <span style="fontSize:0.45rem;color:#ff3c00;"><van-icon name="like" />{{ite.price}}</span> 
               </p>
        
            </dd>
        </dl>
          </div>
    </div>
</template>

<script>
export default {
  props: ["teachers"],
  name: "EverydayTeacher",

  data() {
    return {};
  },

  mounted() {},

  methods: {}
};
</script>

<style lang="scss" scoped>
.teacher {
  .box {
    .top {
      height: 0.625rem;
      border-left: 0.1rem solid red;
      margin: 0.625rem 0px;
      span {
        font-size: 0.45rem;
        padding-left: 0.3125rem;
      }
    }
    ul {
      li {
        position: relative;
        display: flex;
        box-sizing: border-box;
        width: 100%;
        padding: 0.267rem 0.427rem;
        overflow: hidden;
        color: #323233;
        font-size: 0.373rem;
        line-height: 0.64rem;
        background-color: #fff;
        border-bottom: 0.373rem solid rgb(242, 243, 245);
        img {
          width: 1.25rem;
          height: 1.25rem;
          border-radius: 50%;
          margin-right: 0.3125rem;
          margin-top: 0.625rem;
        }
        .right {
          flex: 1;
          color: #000;
        }
      }
    }
    dl {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 100%;
      dd {
        margin: 0rem;
        padding: 0.5rem;
        position: relative;
        color: #323233;
        font-size: 0.373rem;
        line-height: 0.64rem;
        background-color: #fff;
        border-bottom: 0.373rem solid rgb(242, 243, 245);
        img {
          width: 1.25rem;
          height: 1.25rem;
          border-radius: 50%;
        }
        .ite-bot {
          margin: 0;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>